<template>
 <div class="wriper">
  <swiper :options="swiperOption"  v-if="showSwiper">
        <!-- slides -->
        <swiper-slide v-for="item of list" :key="item.id">
            <img   class="swiper-img" :src="item.imgUrl" alt="">
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
       
  </swiper>
  </div>
</template>
<script>
export default {
    name:'HomeSwiper',
    props:{
        list :Array
    },
    data(){
        return {
            swiperOption:{
                pagination:'.swiper-pagination',//页码
                loop:true
            },
        }
    },
    computed:{
        showSwiper(){
            return this.list.length
        }
    }
    // data (){
    //     return {
    //         swiperOption:{
    //             pagination:'.swiper-pagination',//页码
    //             loop:true
    //         },
    //         swiperList :[{
    //             id:'0001',
    //             imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/6e5b7da276fcebf8607305340c375a92.jpg_750x200_6315f8bf.jpg'
    //         },{
    //             id:'0002',
    //             imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20198/01c95889ea184ed8122d1bb3abe8b3de.jpg_750x200_d814b24f.jpg'
    //         }]
    //     }
    // }
}
</script>
<style lang="stylus" scoped>
.wriper >>> .swiper-pagination-bullet-active{
  background:#fff
}
.wriper
 width:100%
 height:0
 overflow:hidden
 padding-bottom:31.3%
 .swiper-img
    width:100%
</style>

